
<template>
  <div id="city_active">
    <header-vfhz-car v-if="$.appname === 'cn.carowl.vfuhuizhong'"/>
    <magic-header v-if="$.appname !== 'cn.carowl.vfuhuizhong'" titleName="同城活动"></magic-header>
    <img v-if="$.appname !== 'cn.carowl.vfuhuizhong'" src="../../assets/img.png" width="100%">
    <empty v-if="activeList.length === 0" message="暂时没有活动"></empty>
    <ul v-if="activeList.length !== 0">
      <loadmore :getMore="loadMore">
        <li class="main" v-for="(item, index) in activeList" :key="index" v-tap="{methods: checkDetail, activeId: item.id, status: item.isbaoming, shopName: item.shop.name}">
          <mu-row gutter>
            <mu-col width="50">
              <h2>{{ item.title }}</h2>
              <div class="content little-info">
                <span>
                  <img :src="position_icon" class="img-icon" alt="">
                  <span v-if="item.area && item.area.parentParentAreaData"> {{ item.area.parentParentAreaData.name | getProvinceName}}</span>
                  <span class="area" v-if="!item.area.parentParentAreaData && item.area.parentAreaData"> {{ item.area.parentAreaData.name | getProvinceName}}</span>
                  <span class="area" v-if="!item.area.parentParentAreaData && !item.area.parentAreaData"> {{ item.area.name | getProvinceName}}</span>
                </span>
                <span>
                  <img :src="time_icon" class="img-icon" alt="">
                  <span class="date">{{ item.beginDate | sliceDate }}</span>
                </span>
              </div>
              <div class="content">
                <p>{{item.attendNumber}}人已报名</p>
              </div>
              <div class="content">
                <h3>主办方：{{item.fleet.name}}</h3>
              </div>
            </mu-col>
            <mu-col width="50">
              <img :src="item.cover ? addPath(item.cover) : defaultImg" width="100%" height="135px" />
            </mu-col>
          </mu-row>

          <div class="attend" v-show="item.isbaoming">
            <span>已报名</span>
          </div>
          <div class="attend-1" v-show="!item.isbaoming">
            <span>未报名</span>
          </div>
          <div class="attend-1" v-show="!item.isbaoming && item.isover">
            <span>已截止</span>
          </div>
          <div class="attend-1" v-show="!item.isbaoming && item.isfull">
            <span>已满员</span>
          </div>

        </li>
      </loadmore>
    </ul>
    <magicFooter v-if="$.appname === 'cn.carowl.vfuhuizhong'"></magicFooter>
  </div>
</template>

<script>
import Vue from "vue";
import magicHeader from "components/magicHeader";
import loadmore from "components/loadmore";
import left from "assets/left-gray.svg";
import empty from "components/empty-page.vue";
// image
import position_icon from "assets/position.svg";
import time_icon from "assets/time_icon.svg";
import defaultImg from "assets/default_user_icon.png";
// service
import QueryFleetActivityListService from "services/carFriend/QueryFleetActivityList";
//惠众使用的footer
import magicFooter from 'components/maFooter'
//惠众头部
import headerVfhzCar from "components/header_vfhz_carFri";
export default {
  name:'city_active_name',
  data() {
    return {
      left,
      defaultImg,
      position_icon,
      time_icon,
      activeList: [],
      query: {
        index: 2,
        count: 5
      },
      queryMore: true
    };
  },
  //
  // 截取日期字符串
  filters: {
    sliceDate: function(value) {
      value = value.split(" ").join("T");
      let resultDate = "";
      const WEEK_DAYS = ["", "周一", "周二", "周三", "周四", "周五", "周六", "周日"];
      if (value) {
        let tempDate = new Date(value);
        let weekDay = WEEK_DAYS[tempDate.getDay()];
        let month = tempDate.getMonth() + 1;
        let day = tempDate.getDate();
        resultDate = `${cusPadStart(String(month), 2, 0)}/${cusPadStart(
          String(day),
          2,
          0
        )} ${weekDay}`;
      }
      return resultDate;
    },
    // 省份名去掉'省'字
    getProvinceName(value) {
      let index = value.indexOf("省");
      if (index > -1) {
        return value.substr(0, index)
      } else {
        return value
      }
    }
  },
  created() {
    QueryFleetActivityListService.bind(Vue.prototype)(
      {
        pageable: {
          pageNumber: "1",
          pageSize: "5"
        },
        fleetId: ""
      },
      resp => {
      	console.log(resp)
        this.activeList = resp.fleetActivityDatas;
        resp.fleetActivityDatas.forEach((item, index) => {
        	console.log(item)
          this.checkDate(item.deadline,function(){
            item.isover = true
          })
          item.isbaoming = item.attends.some((_item, _index) => {
            return _item.memberId === this.$.userId;
          });
        });
      }
    );
  },
  methods: {
    loadMore() {
      if (this.queryMore) {
        QueryFleetActivityListService.bind(this)(
          {
            methodName: "QueryFleetActivityList",
            pageable: {
              pageNumber: this.query.index,
              pageSize: this.query.count
            },
            fleetId: ""
          },
          res => {
            this.query.index++;
            res.fleetActivityDatas.forEach((item, index) => {
            	console.log(item)
            	this.checkDate(item.deadline,function(){
            		item.isover = true
            	})
              item.isbaoming = item.attends.some((_item, _index) => {
                return _item.memberId === this.$.userId;
              });
            });
            this.activeList = this.activeList.concat(res.fleetActivityDatas);
            if (res.fleetActivityDatas.length < this.query.count) {
              this.queryMore = false;
            }
          }
        );
      }
    },
    goBack() {
      this.$router.push({
        name: "carFri_home"
      });
    },
    // 查看活动详情
    checkDetail(params) {
      this.$router.push({
        name: "active_detail",
        params: {
          activeId: params.activeId,
          status: params.status,
          shopName: params.shopName
        }
      });
    },
    checkDate(deadline,success){
    	console.log(attendDate < new Date())
    	let attendDate = new Date(
        Date.parse(deadline.replace(/-/g, "/"))
      );
      if(attendDate < new Date()){
      	success()
      }
    }
  },
  components: {
    magicHeader,
    empty,
    loadmore,
    magicFooter,
    headerVfhzCar
  }
};

/**
 * padstart方法
 */
function cusPadStart(str, len, strPre) {
  if (String.prototype.padStart) {
    str = str.padStart(len, strPre);
  } else {
    let tempLen = len - str.length;
    for (let index = 0; index < tempLen; index++) {
      str = strPre + str;
    }
  }
  return str;
}
</script>
<style lang="scss" scoped="scoped">
#city_active {
  margin-bottom: 50px;
}
#city_active .main {
  background-color: #fff;
  margin-top: 10px;
  padding: 15px;
  padding-right: 10px;
  padding-left: 10px;
  position: relative;
}
#city_active .content {
  margin-top: 10px;
}
#city_active .result_empty {
  background-color: #f8f8f8;
}
#city_active .col-50 img {
  object-fit: cover;
}
#city_active .iconfont {
  color: #f98700;
  margin-left: -6px;
  padding-right: 3px;
}

#city_active .iconfont.icon-dingwei {
  &:before {
    position: relative;
    top: -2.5px;
  }
}
#city_active .iconfont > span {
  position: relative;
  color: #999;
  top: -3px;
  left: -3px;
}
#city_active .iconfont > span.area {
  left: -11px;
}
#city_active .iconfont > .date {
  position: relative;
  top: -3px;
  left: 3px;
}
#city_active p {
  font-size: 14px;
}
#city_active .attend {
  width: 85px;
  height: 70px;
  background-image: url("../../assets/label.png");
  text-align: center;
  position: absolute;
  top: -10px;
  right: 10px;
}
#city_active .attend span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
}
#city_active .attend-1 {
  width: 85px;
  height: 69px;
  background-image: url("../../assets/label-1.png");
  text-align: center;
  position: absolute;
  top: -10px;
  right: 10px;
}
#city_active .attend-1 span {
  display: inline-block;
  margin-top: 44px;
  margin-left: 10px;
  color:#FFF;
}
.little-info {
  display: flex;
  font-size: 13px;
  span:first-child {
    padding-right: 10px;
  }
  span {
    display: flex;
    align-items: center;
  }
  .img-icon {
    width: 19px;
  }
}
</style>
